<template>
  <el-dialog
    title="添加标签"
    :visible.sync="showCataDialog"
    width="45%"
    center
  >
    <el-form :inline="true">
      <el-row>
        <el-form-item label="归属学科" style="margin-left:10px">
          <el-select
            v-model="ruleForm.subject_id"
            placeholder="归属学科"
            @change="clickItem"
          >
            <el-option v-for="item in listt" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属目录" style="margin-left:10px">
          <el-select
            v-model="ruleForm.directory_id"
            placeholder="归属目录"
          >
            <el-option v-for="item in nowSubChildren[0].children" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="标签名称" style="margin-left:10px">
          <el-input v-model="ruleForm.tag_name" placeholder="请输入标签名称" style="width:205px" size="medium" />
        </el-form-item>
        <el-form-item label="排序" style="margin-left:35px">
          <el-input-number v-model="ruleForm.sort" :min="1" :max="10" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="是否显示">
          <el-switch
            v-model="ruleForm.is_show"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
          />
        </el-form-item>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="aaa">取 消</el-button>
      <el-button type="primary" @click="addSubject">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addTag, Edit } from '@/api/tag'
export default {
  props: {
    listt: {
      type: Array,
      required: true
    },
    nowSubChildren: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      showCataDialog: false,
      ruleForm: { // 表单
        sort: 1,
        tag_name: '', // 标签名称
        subject_id: '', // 归属学科
        directory_id: '', // 归属目录
        is_show: 1
      }

    }
  },
  methods: {
    clickItem() { // 选择框发生改变触发事件
      this.nowSubChildren = this.listt.filter(item => {
        if (item.id === this.ruleForm.subject_id) {
          console.log(item)
          return item
        }
      })
    },
    async addSubject() {
      if (this.ruleForm.id) { // 编辑
        await Edit(this.ruleForm)
        this.$message.success('编辑成功')
      } else { // 添加
        await addTag(this.ruleForm)
        this.$message.success('添加成功')
        // this.ruleForm = {}
      }
      this.showCataDialog = false
      this.$parent.ListList()
    },
    aaa() {
      this.showCataDialog = false
    }
  }
}
</script>

<style>

</style>
